<template>
	<view class="container">
		<customNavigation title="处理汇报事项" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png"
		 color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="top">
				异常类型
				<image src="../../static/images/clhbsx_icon_right_nor.png" mode=""></image>
				{{detail.type==1?'检查发现':detail.type==2?'随手报':detail.type==3?'动态监控':detail.type==4?'车载设备':''}}
			</view>
			<view class="userMsg">
				<image class="userImg" src="../../static/images/home_icon_gzrw.png" mode=""></image>
				<view class="userRight">
					<view class="userName">
						{{detail.subUser||""}}
					</view>
					<view class="userType">
						驾驶员
					</view>
				</view>
			</view>

			<view class="form">
				<view class="item">
					<view class="itemName">
						检查表名
					</view>
					<view class="itemContent">
						{{detail.tableName||""}}
					</view>
				</view>
				<view class="item">
					<view class="itemName">
						汇报时间
					</view>
					<view class="itemContent">
						{{detail.subTime||""}}
					</view>
				</view>
				<view class="item">
					<view class="itemName">
						相关设备
					</view>
					<view class="itemContent">
						{{detail.equipment||""}}
					</view>
				</view>
				<view class="item">
					<view class="itemName">
						问题描述
					</view>
					<view class="itemContent">
						{{detail.description||""}}
					</view>
				</view>
			</view>

			<view class="media">
				<image class="pre" @click="pre" src="../../static/images/clhbsx_icon_left_nor.png" mode=""></image>
				<view class="centerBox">
					<swiper class="centerBox" :indicator-dots="false" :autoplay="false" :duration="1000" :current="selectIndex" @change="changeSelect">
						<swiper-item v-for="(item,index) in list" :key="index">
							<image v-if="item.type=='image'" class="mediaCenter" :src="item.path" mode="" @click="previewImg(item.path)"></image>
							<view v-else-if="item.type=='audio'" class="mediaCenter" @tap.stop="playOrPauseAudio">
								<image :class="['audioImg',{'play':play}]" :src="play==false?icon1:icon2" mode=""></image>
							</view>
							<video v-else-if="item.type=='video'" class="mediaCenter" :src="item.path" poster=""
							 name="" author="" action="" controls></video>
							 <view v-else class="mediaCenter" v-if="list.length<=0">
							 	暂无
							 </view>
						</swiper-item>
					</swiper>
					
					
					
					
				<!-- 	<view  class="mediaCenter" @tap.stop="playOrPauseAudio">
					 	<image :class="['audioImg',{'play':play}]" :src="play==false?icon1:icon2" mode=""></image>
						<view class="audioInTimer" v-if="time">
							{{time}}s
						</view>
					 </view> -->
				</view>
				<image class="next" @click="next" src="../../static/images/clhbsx_icon_right_norRight.png" mode=""></image>
			</view>

			<view class="buttonList">
				<view class="btnTop">
					<button class="btn1" @click="ExceptionRepair">
						修复
					</button>
					<button class="btn1" @click="ExceptionRectification">
						整改
					</button>
				</view>
				<button class="closeBtn" type="default" @click="openPopup">答复并关闭该项异常</button>
			</view>

		</view>
		
		<uni-popup class="popup" ref="popup" type="center">
			<view class="popupBox">
				<view class="title">
					提示
				</view>
				<textarea class="descContent" v-model="desc" value="" placeholder="请输入答复内容" />
				<view class="popupBtn">
					<view class="itemBtn" @click="closePopup">
						取消
					</view>
					<view class="itemBtn2" @click="reply">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				id: "",
				type: "",
				detail: "",
				list: [],
				selectIndex: 0,
				desc:"",
				innerAudioContext:"",
				play:false,
				audioSrc:"",
				icon1:"/static/images/clhbsx_button_voice_nor.png",
				icon2:"/static/images/audioGif.gif",
				time:"",
				timer:""
			}
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			let innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = false;
			innerAudioContext.src = this.audioSrc;
			// innerAudioContext.src = "https://nmsfilesafety.51yunmai.com/UploadFiles/T0201//2021.7/ec144f8b-7b89-4bf8-a0dc-cfadb9988162/20210702104551692.mp3";
			
			innerAudioContext.onPlay(()=>{
				console.log("开始播放")
			})
			innerAudioContext.onTimeUpdate(()=>{
				if(!this.time&&this.time!==0){
					console.log(this.time)
					console.log("触发")
					this.time=parseInt(innerAudioContext.duration)
					console.log(this.time)
				}
				// console.log(innerAudioContext.duration)
			})
			setTimeout(function(){
				console.log(innerAudioContext.duration)
			},1000)
			this.innerAudioContext=innerAudioContext
		},
		mounted() {
			this.getExceptionDetail()
			// this.createAudio()
		},
		methods: {
			changeSelect(event){
				this.selectIndex=event.detail.current
				this.innerAudioContext.src=this.list[this.selectIndex].path
			},
			previewImg(url){
				console.log(url)
				let imgsArray = [];
				imgsArray[0] = url
				 uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			//打开弹出层
			openPopup(){
				this.$refs.popup.open('center')
			},
			//关闭弹出层
			closePopup(){
				this.$refs.popup.close('center')
				this.desc=""
			},
			
			//上一个，媒体文件
			pre() {
				this.time==""
				if (this.selectIndex <= 0) {

				} else {
					this.selectIndex = this.selectIndex - 1
					this.innerAudioContext.src=this.list[this.selectIndex].path
				}
			},

			//下一个媒体文件
			next() {
				this.time==""
				if (this.selectIndex >= this.list.length - 1) {

				} else {
					this.selectIndex = this.selectIndex + 1
					this.innerAudioContext.src=this.list[this.selectIndex].path
				}
			},

			getExceptionDetail() {
				let that = this
				let value = {}
				value.Type = this.type
				value.ID = this.id
				api.GetExceptionDetail(value).then(res => {
					let attrList = []
					attrList = res.data.attrList || []
					if (attrList.length > 0) {
						attrList.forEach(item => {
							let object = {}
							object.path = item.Path
							if (that.isImg(item.Path) == true) {
								object.type = "image"
							} else if (that.isVideo(item.Path) == true) {
								object.type = "video"
							} else if (that.isAudio(item.Path) == true) {
								object.type = "audio"
							}
							this.list.push(object)
						})
					}
					this.detail = res.data
				})
			},
			//修复异常反馈
			ExceptionRepair() {
				let value = {}
				value.Type = this.type
				value.ID = this.id
				api.ExceptionRepair(value).then(res => {
					uni.showToast({
						icon:"none",
						title: "异常反馈已修复",
						duration: 1500
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1500)
				})
			},

			//整改异常反馈
			ExceptionRectification() {
				let value = {}
				value.Type = this.type
				value.ID = this.id
				api.ExceptionRectification(value).then(res => {
					uni.showToast({
						icon:"none",
						title: "异常反馈已整改",
						duration: 1500
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1500)
				})
			},
			
			//答复并关闭该项异常
			reply(){
				let value = {}
				value.Type = this.type
				value.ID = this.id
				value.desc = this.desc
				if(!value.desc){
					uni.showToast({
						icon:"none",
						title:"请输入答复!",
						duration:1500
					})
					return
				}
 				api.ExceptionClose(value).then(res => {
					uni.showToast({
						icon:"none",
						title: "已答复并关闭该项异常",
						duration: 1500
					})
					this.closePopup()
					setTimeout(function() {
						uni.navigateBack()
					}, 1500)
				})
			},

			//校验是否图片文件类型
			isImg(file) {
				return /\.(png|jpeg|jpg|gif|PNG|JPEG|JPG|GIF)$/i.test(file)
			},

			//校验是否视频文件类型
			isVideo(file) {
				return /\.(swf|flv|mp4|rmvb|avi|mpeg|ra|ram|mov|wmv|)$/i.test(file)
			},

			//校验是否语音文件
			isAudio(file) {
				return /\.(mp3|wav|wma|ogg|ape|aac|m4a|MP3|WAV|WMA|OGG|APE|AAC||M4A)$/i.test(file)
			},
			
			//开始音频文件
			startAudio(){
				uni.showToast({
					icon:"none",
					title:"开始播放"
				})
				let that=this
				that.timer=setInterval(function(){
					  if(that.time>1){
						  that.time=that.time-1
						  console.log(that.time)
					  }else{
						  that.time=""
						  that.play=false
						  that.endAudio("已结束")
						  clearInterval(that.timer)
					  }
				},1000)
				this.innerAudioContext.play(() => {
				  console.log('开始播放');
				  // that.innerAudioContext=innerAudioContext
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			//结束音频文件
			endAudio(){
				let that=this
				uni.showToast({
					icon:"none",
					title:"已结束"
				})
				clearInterval(that.timer)
				this.innerAudioContext.stop(() => {
				  console.log('已暂停');
				  // that.innerAudioContext=innerAudioContext
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			
			//暂停音频文件
			stopAudio(desc){
				let that=this
				uni.showToast({
					icon:"none",
					title:desc
				})
				clearInterval(that.timer)
				this.innerAudioContext.pause(() => {
				  console.log('已暂停');
				  // that.innerAudioContext=innerAudioContext
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			
			playOrPauseAudio(){
				if(this.play==true){
					this.stopAudio("已暂停")
					this.play=false
				}else{
					this.startAudio()
					this.play=true
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: rgba(250, 250, 250, 1);

		.container {
			width: 100%;
			height: auto;

			.main {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 11vh;

				.top {
					width: 100%;
					height: 92rpx;
					background-color: white;
					padding-left: 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #666666;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 16rpx;
						margin-right: 16rpx;
					}
				}

				.userMsg {
					width: 100%;
					height: 217rpx;
					display: flex;
					align-items: center;
					padding: 0 30rpx 0 30rpx;
					box-sizing: border-box;

					.userImg {
						width: 120rpx;
						height: 120rpx;
						margin-right: 30rpx;
					}

					.userRight {
						height: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;

						.userName {
							font-size: 44rpx;
							font-family: PingFangSC;
							font-weight: 500;
							color: #2A2A2A;
						}

						.userType {
							background: #0C4320;
							border-radius: 10rpx;
							height: 42rpx;
							text-align: center;
							line-height: 42rpx;
							padding: 0 15rpx 0 15rpx;
							font-size: 24rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				.form {
					width: 686rpx;
					height: 372rpx;
					background-color: white;
					padding-left: 30rpx;
					padding-right: 30rpx;
					box-sizing: border-box;
					border-radius: 22px;

					.item {
						width: 100%;
						height: 90rpx;
						border-bottom: 2rpx solid rgba(245, 245, 245, 1);
						display: flex;
						align-items: center;
						justify-content: space-between;

						.itemName {
							font-size: 30rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #2A2A2A;
						}

						.itemContent {
							font-size: 30rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #666666;
						}
					}

					.item:nth-last-child(1) {
						border: none;
					}
				}

				.media {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 60rpx;

					.centerBox {
						width: 623rpx;
						height: 351rpx;
						background: #e6e6e6;
						font-size: 50rpx;
						color: #8f8f8f;

						.mediaCenter {
							width: 100%;
							height: 100%;
							text-align: center;
							line-height: 351rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: white;
							position: relative;
							.audioInTimer{
								font-size: 26rpx;
								color: rgba(95, 95, 95, 1.0);
								position: absolute;
								right: 30rpx;
								bottom: 30rpx;
								line-height: 0;
							}
							.audioImg{
								width: 253rpx;
								height: 253rpx;
							}
							.play{
								width: 350rpx;
								height: 350rpx;
							}
						}
					}

					.pre,
					.next {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.buttonList {
					width: 570rpx;
					height: auto;
					margin-top: 171rpx;
					margin-bottom: 161rpx;

					.btnTop {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn1 {
							width: 260rpx;
							height: 72rpx;
							background: #32A238;
							border-radius: 10rpx;
							text-align: center;
							line-height: 72rpx;
							font-size: 28rpx;
							font-family: PingFangSC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.closeBtn {
						width: 570rpx;
						height: 72rpx;
						background: rgba(50, 162, 56, 0.1);
						border: 2rpx solid #32A238;
						border-radius: 10rpx;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #32A238;
						margin-top: 30rpx;
					}
				}
			}
			.popupBox{
				background-color: white;
				width: 600rpx;
				height: 500rpx;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.title{
					width: 100%;
					height: auto;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					font-size: 30rpx;
					font-weight: 900;
					color: #333333;
					text-align: center;
				}
				.descContent{
					width: 500rpx;
					height: 250rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background-color: #efefef;
				}
				.popupBtn{
					width: 100%;
					height: 72rpx;
					position: absolute;
					bottom: 30rpx;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.itemBtn{
						width: 260rpx;
						height: 72rpx;
						border: 2rpx solid #32A238;
						border-radius: 10rpx;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #32A238;
						box-sizing: border-box;
					}
					.itemBtn2{
						width: 260rpx;
						height: 72rpx;
						background: #32A238;
						border-radius: 10rpx;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
